<template>
    <div class="sjplatformSelectForm">
        <el-form :inline="true">
            <el-form-item label="项目设置名称">
                <el-input v-model="projectSettingTable.queryCondition.svalue" placeholder="请输入名称..." />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchData">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="openEditForm('add', null)">新增</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="sjplatformtable">
        <el-table :data="projectSettingTable.tableData" v-loading="loading" stripe border style="width: 100%">
            <el-table-column label="序号" width="60">
                <template #default="{ $index }">
                    {{ $index + 1 + (currentPage - 1) * pageSize }}
                </template>
            </el-table-column>
            <el-table-column prop="skey" label="项目设置key" />
            <el-table-column prop="svalue" label="项目设置value" />
            <el-table-column prop="stype" label="类型" />
            <el-table-column label="操作" width="140">
                <template #default="{ row }">
                    <el-tooltip content="修改" placement="bottom" effect="light">
                        <i class="edit-icon" @click="openEditForm('edit', row)"></i>
                    </el-tooltip>
                    <el-tooltip content="删除" placement="bottom" effect="light">
                        <i class="del-icon" @click="handleDelete(row)"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="projectSettingTable.total" :page-size="pageSize"
            :current-page="currentPage" @current-change="handleCurrentChange" />
    </div>
    <el-dialog v-model="newProjectSettingTableVisible" :title="formTitle" width="50%" draggable
        :destroy-on-close="true">
        <ProjectSettingAddOrUpdate />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="reset">重置</el-button>
                <el-button type="primary" @click="operateProjectSetting">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineProps } from "vue";
import ProjectSettingAddOrUpdate from "./ProjectSettingAddOrUpdate.vue";
import commonUtil from "../../../utils/common";
import { useProjectSettingTable } from "../../../hooks/ProjectManager/Setting/useProjectSettingTable";

let receivedProps = defineProps(["stype"]);

let currentPage = ref(1);
let pageSize = ref(10); // 默认每页大小
let formTitle = ref("新增项目设置");
let loading = ref(false);

let newProjectSettingTableVisible = ref(false); //新增机构窗口
let addOrUpdate = ref("add"); //新增还是修改

let { projectSettingTable, projectStore, queryData, addData, updateData, deleteData } =
    useProjectSettingTable(currentPage, pageSize);
queryData(receivedProps.stype);

//打开编辑窗口
function openEditForm(value, data) {
    addOrUpdate.value = value;
    if (value == "add") {
        formTitle.value = "新增项目设置";
        projectStore.resetProjectSettingModel();
    }
    if (value == "edit") {
        formTitle.value = "修改项目设置";
        projectStore.projectSettingModel = data;
    }
    newProjectSettingTableVisible.value = true;
}

//翻页事件
function handleCurrentChange(newPage) {
    currentPage.value = newPage;
    searchData(); // 根据当前页获取数据
}
//新增或修改
async function operateProjectSetting() {
    if (addOrUpdate.value == "add") {
        if (await addData()) {
            commonUtil.Methods.ShowMessage("success", "新增项目设置成功！");
            newProjectSettingTableVisible.value = !newProjectSettingTableVisible.value;
        } else {
            commonUtil.Methods.ShowMessage("Oops", "新增项目设置失败！");
        }
    }
    if (addOrUpdate.value == "edit") {
        if (await updateData()) {
            commonUtil.Methods.ShowMessage("success", "修改项目设置成功！");
            newProjectSettingTableVisible.value = !newProjectSettingTableVisible.value;
        } else {
            commonUtil.Methods.ShowMessage("Oops", "修改项目设置失败！");
        }
    }
    searchData();
}
//删除
async function handleDelete(data) {
    if (await deleteData(data.id)) {
        commonUtil.Methods.ShowMessage("success", "删除项目设置成功！");
    } else {
        commonUtil.Methods.ShowMessage("Oops", "删除项目设置失败！");
    }
    searchData();
}
//重置按钮
function reset() {
    projectStore.resetProjectSettingModel();
}
//取消新增窗口
function cancel() {
    projectStore.resetProjectSettingModel();
    newProjectSettingTableVisible.value = !newProjectSettingTableVisible.value;
}
//查询按钮
function searchData() {
    loading.value = true;
    currentPage.value = 1;
    queryData(receivedProps.stype);
    loading.value = false;
}

</script>